<template>
    <div class="swiper">
        <ul class="swiper_list">
            <li class="swiper_item" v-for="item in item_data" :key="item.id">
                <img :src="item.img" alt="" @click="toDetails(item.id)">
                <p class="name">{{item.title}}</p>
                <p class="price">{{item.price}}</p>
            </li>
        </ul>
        <a @click="lastClick" class="left_btn"><i class="
            el-icon-arrow-left"></i></a>
        <a @click="nextClick" class="right_btn"><i class="
            el-icon-arrow-right"></i></a>
        <div class="swiper-dd">
            <span :class="flag==1?'active':''"></span>
            <span :class="flag==2?'active':''"></span>
            <span :class="flag==3?'active':''"></span>
            <span :class="flag==4?'active':''"></span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailSwiper',

    data() {
        return {
            swiper_data: [
                [
                    {
                        id:"3989875",
                        img:"https://yanxuan-item.nosdn.127.net/88dfc9a6c64c530c4127aef41881dd12.png",
                        title:"睡觉中呵护美腿日本SLIMWALK去水肿压力袜",
                        price:"¥135.00",
                    },
                    {
                        id:"3997069",
                        img:"https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg",
                        title:"梨皮朱泥三绝清代小品壶经典款紫砂壶",
                        price:"¥780.00",
                    },
                    {
                        id:"3994995",
                        img:"https://yanxuan-item.nosdn.127.net/07dee4b72938cb420234a0535ae1643d.png",
                        title:"时尚百搭，儿童雪尼尔毛衣3-9岁",
                        price:"¥109.00",
                    },
                    {
                        id:"3488051",
                        img:"https://yanxuan-item.nosdn.127.net/448ffecb0451b74cb04c91a3c5ce25c1.png",
                        title:"无需等待快速醒酒器",
                        price:"¥59.00",
                    },
                ],
                [
                    {
                        id:"3995858",
                        img:"https://yanxuan-item.nosdn.127.net/27199cc003c5237eb72d235c2281482d.png",
                        title:"男女同款情侣抗菌夜视休闲跑鞋",
                        price:"¥149.00",
                    },
                    {
                        id:"3488051",
                        img:"https://yanxuan-item.nosdn.127.net/fc03362c322e53beecaf9441ea97ffeb.jpg",
                        title:"网易味央黑猪里脊200g*1袋",
                        price:"¥49.90",
                    },
                    {
                        id:"3994461",
                        img:"https://yanxuan-item.nosdn.127.net/ad3d26f08cf3c492243c0d47c5664e95.png",
                        title:"生态有机棉，儿童百搭高领打底T恤110-160cm",
                        price:"¥89.00",
                    },
                    {
                        id:"3988815",
                        img:"https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png",
                        title:"除甲醛除菌除异味，车家两用空气净化器",
                        price:"¥59.00",
                    },
                ],
                [
                    {
                        id:"3995195",
                        img:"https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg",
                        title:"毛茸茸暖意，儿童羊羔绒外套73-120cm",
                        price:"¥99.00",
                    },
                    {
                        id:"3995415",
                        img:"https://yanxuan-item.nosdn.127.net/5c2abad66d86250b6c85c74ffd0ecc2d.png",
                        title:"玩趣彩虹四季拖鞋2.0",
                        price:"¥21.90",
                    },
                    {
                        id:"3995857",
                        img:"https://yanxuan-item.nosdn.127.net/4605351c7b359f53d1fe4fe39a8a1999.png",
                        title:"男式休闲百搭板鞋",
                        price:"¥299.00",
                    },
                    {
                        id:"3989107",
                        img:"https://yanxuan-item.nosdn.127.net/226b2acb4b0b96837a32f7c032570dc0.png",
                        title:"可登机全铝镁拉杆箱系列（17/20寸）",
                        price:"¥559.00",
                    },
                ],
                [
                {
                        id:"4000027",
                        img:"https://yanxuan-item.nosdn.127.net/5b3c61cf75a2480774616f5662a5bccf.jpg",
                        title:"精酿经典啤酒杯可乐杯气泡水杯两支装",
                        price:"¥99.00",
                    },
                    {
                        id:"4000031",
                        img:"https://yanxuan-item.nosdn.127.net/b011048adc2bf3952c72e741e47d1419.jpg",
                        title:"电动红酒醒酒器分酒器取酒器",
                        price:"¥169.00",
                    },
                    {
                        id:"3994631",
                        img:"https://yanxuan-item.nosdn.127.net/efcbdbe9a56035d74cb3f48a0c5e8e87.png",
                        title:"男女同款情侣立体飞织爆米花运动鞋",
                        price:"¥208.00",
                    },
                    {
                        id:"3994462",
                        img:"https://yanxuan-item.nosdn.127.net/50db51cb0a25b0d346ce62b22b5e0f92.png",
                        title:"拼色更童趣，儿童撞色T恤110-160cm",
                        price:"¥79.00",
                    },
                ]
            ],
            item_data: [],
            flag: 1, 
        };
    },

    created() {
        this.item_data = this.swiper_data[0]
        // this.getData()
    },

    methods: {
        nextClick() {
            this.flag = this.flag + 1
            if(this.flag >= this.swiper_data.length + 1) {
                this.flag = 1
            }
            let index = this.flag - 1
            
            this.getData(index)
        },
        lastClick() {
            this.flag = this.flag - 1
            if(this.flag <= 0) {
                this.flag = this.swiper_data.length 
            }
            let index = this.flag -1
            this.getData(index)
        },
        getData(index) {
            this.item_data = this.swiper_data[index]
        },
        toDetails(id) {
            console.log(id)
            this.$router.push({
                path:"/about/details",
                query:{
                    id
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>
    .swiper {
        width: 1240px;
        height: 380px;
        position: relative;
        list-style: none;
        .swiper_list {
            width: 1160px;
            height: 380px;
            display: flex;
            justify-content: space-around;
            padding: 0 40px;
            list-style: none;
            .swiper_item {
                width: 240px;
                height: 289px;
                list-style: none;
                img {
                    width: 199px;
                    height: 199px;
                    padding: 20px;
                }
                p {
                    width: 160px;
                    padding: 0 40px;
                    overflow: hidden;
                    white-space:nowrap;
                    text-overflow: ellipsis;
                    color: #666;
                }
                .price {
                    margin-top: 15px;
                    font-size: 16px;
                    color: #cf4444;
                }
                
            }
        }
        a {
            position: absolute;
            top: 120px;
            i {
                font-size: 30px;
                color: #ddd;
            }
        }
        .left_btn {
            left: 30px;
        }
        .right_btn {
            right: 30px;
        }
        .swiper-dd {
            width: 100px;
            height: 12px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            position: absolute;
            left: 50%;
            bottom: 30px;
            margin-left: -50px;
            /* background: red; */
            span {
                width: 12px;
                height: 12px;
                background: rgba(0,0,0,.2);
                border-radius: 50%;
            }
            span.active {
                background: red;
            }
        }
    }
</style>